<template>
  <div>
    <div ref='maps' :style="{height:'700px',width:'100%'}"></div>
    <!--没有搜索到数据-->
    <el-dialog
      :visible.sync="centerDialogVisible"
      width="30%"
      center>
      <div style="text-align: center">
        <span
          style='display: inline-block;background: url("../../../static/img/weep.png") no-repeat;background-size:100%;width: 50px;height: 50px;vertical-align: middle;'></span>
        <span style="display:inline-block;font-size: 20px;font-weight: bold">没有搜索到数据!</span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import '../../../node_modules/echarts/map/js/china.js'

  export default {
    data() {
      return {
        URL: this.$com.Url,
        provinces: [],
        province: [
          {name: '河北', value: 0},
          {name: '山东', value: 0},
          {name: '河南', value: 0},
          {name: '重庆', value: 0},
          {name: '广西', value: 0},
          {name: '四川', value: 0},
          {name: '海南', value: 0},
          {name: '北京', value: 0},
          {name: '天津', value: 0},
          {name: '上海', value: 0},
          {name: '江苏', value: 0},
          {name: '浙江', value: 0},
          {name: '福建', value: 0},
          {name: '安徽', value: 0},
          {name: '江西', value: 0},
          {name: '湖北', value: 0},
          {name: '湖南', value: 0},
          {name: '广东', value: 0},
          {name: '辽宁', value: 0},
          {name: '吉林', value: 0},
          {name: '黑龙江', value: 0},
          {name: '内蒙古', value: 0},
          {name: '云南', value: 0},
          {name: '贵州', value: 0},
          {name: '山西', value: 0},
          {name: '陕西', value: 0},
          {name: '甘肃', value: 0},
          {name: '新疆', value: 0},
          {name: '西藏', value: 0},
          {name: '青海', value: 0},
          {name: '宁夏', value: 0},
          {name: '台湾', value: 0},
          {name: '香港', value: 0},
          {name: '澳门', value: 0},
          {name: '南海诸岛', value: 0},
        ],
        mydata: [],
        maps: false,
        /*无数据*/
        centerDialogVisible: false,
      }
    },
    mounted() {
      this.GET()
    },
    methods: {
      GET() {
        this.$axios({
          method: 'GET',
          url: this.URL + '/huimei/hco/hcomdm/province_group',
        }).then((res) => {
          let _this = this;
          if (res.data.data != null && res.data.data.result.length > 0) {
            for (let a of res.data.data.result) {
              if (a.province == '内蒙') {
                a.province = '内蒙古'
              }
              let list = {
                name: a.province,
                value: a.doc_count
              };
              _this.provinces.push(list);
              for (let i = 0; i < _this.province.length; i++) {
                if (list.name == this.province[i].name) {
                  _this.province.splice(i, 1);
                }
              }
            }
            for (let b of _this.provinces) {
              _this.province.push(b)
            }
            _this.mydata = _this.province;
            setTimeout(() => {
              this.map()
            }, 100);
          } else {
            this.centerDialogVisible = true;
            setTimeout(() => {
              this.centerDialogVisible = false;
            }, 1500);
          }
        });
      },
      map() {
        let _this = this;
        let yData = [];
        this.mydata.sort(function (o1, o2) {
          if (isNaN(o1.value) || o1.value == null) return -1;
          if (isNaN(o2.value) || o2.value == null) return 1;
          return o1.value - o2.value;
        });
        for (let i = 0; i < this.mydata.length; i++) {
          yData.push(this.mydata[i].name);
        }
        let option = {
          title: {
            text: '医院维度',
            left: 'center',
          },
          tooltip: {
            show: true,
            formatter: function (params) {
              return params.name + '<br>' + '医院数为：' + params.data['value']
            },
          },
          dataRange: {
            x: 'left',
            y: 'bottom',
            splitList: [
              {start: 2000, color: '#FF0000'},
              {start: 1500, end: 2000, color: '#FF4500'},
              {start: 1000, end: 1500, color: '#FF6347'},
              {start: 500, end: 1000, color: '#FF8C69'},
              {start: 1, end: 500, color: '#FF8C00'},
              {end: 1, color: 'lightgrey'}
            ],
            /*                        color: ['red', '#949fb1', '#f3ce85']*/
          },
          visualMap: {
            type: 'continuous',
            showLabel: true,
            seriesIndex: [0],
            min: 0,
            /*            inRange: {
                          color: ['lightgrey', 'gold', 'red']
                        },*/
            bottom: 30,
            left: 'left',
          },
          grid: {
            right: 10,
            top: 80,
            bottom: 30,
            width: '30%'
          },
          xAxis: {
            type: 'value',
            scale: true,
            position: 'top',
            splitNumber: 1,
            boundaryGap: false,
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              margin: 2,
              textStyle: {
                color: '#aaa'
              }
            }
          },
          yAxis: {
            type: 'category',
            nameGap: 16,
            axisLabel: {
              interval: 0,
              textStyle: {
                color: '#999'
              }
            },
            data: yData
          },
          geo: {
            roam: false,
            zoom: 0.7,
            map: 'china',
            left: 'left',
            right: '500',
            layoutSize: '70%',
            label: {
              emphasis: {
                show: false
              }
            },
          },
          series: [{
            type: 'map',
            roam: false,
            geoIndex: 0,
            label: {
              show: false,
            },
            data: this.mydata
          }, {
            name: 'barSer',
            type: 'bar',
            roam: false,
            visualMap: false,
            zlevel: 2,
            barMaxWidth: 20,
            itemStyle: {
              normal: {
                backgroundColor: '#F01313',
              }
            },
            label: {
              normal: {
                show: false,
                color: '#000',
                position: 'right',
                offset: [0, 10]
              },
              emphasis: {
                show: true,
                position: 'right',
                offset: [10, 0]
              }
            },
            data: this.mydata
          }]
        };
        let myCharts = this.$echarts.init(this.$refs.maps);
        myCharts.setOption(option);
        myCharts.on('click', function (params) {
          _this.$emit('parameters', params);
        });
      },
    },
  }
</script>

<style scoped>
  div {

  }
</style>
